<template>
  <div class="home-container">
    <!-- logo -->
    <div class="logo-container">
      <img class="logo" src="../assets/logo.png">
    </div>
    <!-- 标题 -->
    <div class="title-container">
      <img src="@/assets/information.png" class="title-image">
    </div>
    <!-- 背景 -->
    <div class="bg-container">
      <div class="bg-active">
        <img class="bg-active-image" src="@/assets/bg-under.png" alt>
      </div>
      <img src="@/assets/bg1.png" class="bg-img">
    </div>
    <div class="body-container">
      <!-- 侧边栏 -->
      <itemSiderBar />
      <itemOption />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import itemSiderBar from '@/components/ItemSiderBar'
import itemOption from '@/components/ItemOption'
import { save, read } from '@/db/bufferList'
export default {
  name: 'Home',
  components: {
    itemSiderBar,
    itemOption
  },
  created() {
    read('list_home_type')
      .then(res => {
        const { list: data } = res
        this.$store.commit('app/SET_LISTTYPE', data)
        console.log('获取本地分类数据成功', res)
      })
      .catch(err => {
        console.log(err)
        this.$store.dispatch('app/getListType').then((res) => {
          // 在这里做本地存储
          console.log('获取分类列表', res)
          save({ type: 'list_home_type', list: res })
        })
      })
    read('list_home_data')
      .then(res => {
        const { list: data } = res
        this.$store.commit('app/SET_LISTTOTA', data)
        this.$store.commit('app/SET_LISTNOWUSE', data)
        console.log('获取本地总列表数据成功', res)
      })
      .catch(err => {
        console.log(err)
        this.$store.dispatch('app/getListTotal').then((res) => {
          // 在这里做本地存储
          console.log('获取所有数据', res)
          save({ type: 'list_home_data', list: res })
        })
      })
  }
}
</script>

<style lang="scss" scoped>
@keyframes bg-active {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(-20%);
  }
}
.home-container {
  .logo-container {
    width: 50%;
    padding-top: 10px;
    z-index: 748943649;
    background-color: rgba($color: #fff, $alpha: 0.1);
  }
  .title-container {
    padding: 15%;
    z-index: 748943649;
  }
  .bg-container {
    position: absolute;
    top: 0;
  }
  .bg-active {
    width: 130%;
    position: absolute;
    top: 0;
    animation: 10s bg-active infinite alternate;
    .bg-active-image {
      width: 100%;
      position: absolute;
    }
  }
  .body-container {
    width: 100%;
    max-width: 640px;
    height: calc(60vh);
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>

